<template>
  <input type="text" class="m-input" v-model="modelValue" @input="handleInput" />
</template>

<script lang="ts" setup name="MInput">
interface inputProps {
  modelValue: string | number
}
const props = withDefaults(defineProps<inputProps>(), {
  modelValue: ''
})

interface inputEmits {
  (e: 'input:modelValue', value: string): string
  (e: 'change:modelValue', value: string): string
  (e: 'update:modelValue', value: string): void
}
const emit = defineEmits<inputEmits>()

type TargetElement = HTMLInputElement | HTMLTextAreaElement
const handleInput = (event: Event) => {
  emit('update:modelValue', (event.target as TargetElement).value)
}
</script>
